<template>
  <view>
    <view v-if="visible" class="popup-mask"
      :style="{ top: top, left: '0', width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', zIndex: 999 }"
      @click="hidePopup">
      <view class="popup-content" :style="popupStyle" :animation="animationData" @click.stop>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SlideDownPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '30%'
    },
    top: {
      type: String,
      default: '0px' // 设置默认值
    }
  },
  data() {
    return {
      animationData: {},
      popupStyle: {
        transform: 'translateY(-100%)',
        height: this.height
      }
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.showPopup();
      } else {
        this.hidePopup();
      }
    }
  },
  methods: {
    showPopup() {
      this.$nextTick(() => {
        const animation = uni.createAnimation({
          duration: 300,
          timingFunction: 'ease-out'
        });
        animation.translateY(0).step();
        this.animationData = animation.export();
      });
    },
    hidePopup() {
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-in'
      });
      animation.translateY('-100%').step();
      this.animationData = animation.export();
      setTimeout(() => {
        this.$emit('update:visible', false);
        this.popupStyle.transform = 'translateY(-100%)';
      }, 300);
    }
  }
};
</script>

<style scoped>
.popup-mask {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
}
</style>